<template>
	<view class="reviews-page">
		<!-- 评分统计 -->
		<view class="rating-summary">
			<view class="overall-rating">
				<text class="rating-score">{{ overallRating }}</text>
				<view class="rating-stars">
					<uni-icons v-for="star in 5" :key="star" :type="star <= Math.floor(overallRating) ? 'star-filled' : 'star'" size="16" :color="star <= Math.floor(overallRating) ? '#FFD700' : '#E0E0E0'"></uni-icons>
				</view>
				<text class="total-reviews">共{{ totalReviews }}条评价</text>
			</view>
			<view class="rating-distribution">
				<view class="rating-bar" v-for="(item, index) in ratingDistribution" :key="index">
					<text class="star-label">{{ 5 - index }}星</text>
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: item.percentage + '%' }"></view>
					</view>
					<text class="count">{{ item.count }}</text>
				</view>
			</view>
		</view>

		<!-- 评价筛选 -->
		<view class="filter-section">
			<scroll-view scroll-x="true" class="filter-tags" show-scrollbar="false">
				<view class="filter-tag" :class="{ active: currentFilter === 'all' }" @click="selectFilter('all')">
					全部({{ totalReviews }})
				</view>
				<view class="filter-tag" :class="{ active: currentFilter === 'image' }" @click="selectFilter('image')">
					有图({{ imageReviewCount }})
				</view>
				<view class="filter-tag" :class="{ active: currentFilter === '5' }" @click="selectFilter('5')">
					5星({{ ratingDistribution[0].count }})
				</view>
				<view class="filter-tag" :class="{ active: currentFilter === '4' }" @click="selectFilter('4')">
					4星({{ ratingDistribution[1].count }})
				</view>
				<view class="filter-tag" :class="{ active: currentFilter === '3' }" @click="selectFilter('3')">
					3星({{ ratingDistribution[2].count }})
				</view>
			</scroll-view>
		</view>

		<!-- 评价列表 -->
		<view class="reviews-list">
			<view class="review-item" v-for="(item, index) in filteredReviews" :key="index">
				<view class="review-header">
					<image :src="item.avatar" class="user-avatar"></image>
					<view class="user-info">
						<text class="username">{{ item.username }}</text>
						<view class="review-meta">
							<view class="review-rating">
								<uni-icons v-for="star in 5" :key="star" :type="star <= item.rating ? 'star-filled' : 'star'" size="12" :color="star <= item.rating ? '#FFD700' : '#E0E0E0'"></uni-icons>
							</view>
							<text class="review-date">{{ item.date }}</text>
						</view>
					</view>
				</view>
				<view class="review-content">{{ item.content }}</view>
				<view class="review-images" v-if="item.images && item.images.length">
					<image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img" mode="aspectFill" @click="previewImage(item.images, imgIndex)"></image>
				</view>
				<view class="review-actions">
					<view class="action-btn" @click="likeReview(item, index)">
						<uni-icons :type="item.isLiked ? 'heart-filled' : 'heart'" size="14" :color="item.isLiked ? '#FF6B35' : '#999'"></uni-icons>
						<text>{{ item.likeCount || 0 }}</text>
					</view>
					<view class="action-btn" @click="replyReview(item)">
						<uni-icons type="chat" size="14" color="#999"></uni-icons>
						<text>回复</text>
					</view>
				</view>
				<!-- 回复列表 -->
				<view class="replies" v-if="item.replies && item.replies.length">
					<view class="reply-item" v-for="(reply, replyIndex) in item.replies" :key="replyIndex">
						<text class="reply-author">{{ reply.author }}：</text>
						<text class="reply-content">{{ reply.content }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 写评价按钮 -->
		<view class="write-review-btn" @click="writeReview">
			<uni-icons type="edit" size="20" color="#fff"></uni-icons>
			<text>写评价</text>
		</view>

		<!-- 写评价弹窗 -->
		<uni-popup ref="reviewPopup" type="bottom">
			<view class="review-popup">
				<view class="popup-header">
					<text>写评价</text>
					<text class="close-btn" @click="closeReviewPopup">取消</text>
				</view>
				<view class="popup-content">
					<view class="rating-section">
						<text class="section-title">评分</text>
						<view class="rating-input">
							<uni-icons v-for="star in 5" :key="star" :type="star <= newReview.rating ? 'star-filled' : 'star'" size="24" :color="star <= newReview.rating ? '#FFD700' : '#E0E0E0'" @click="setRating(star)"></uni-icons>
						</view>
					</view>
					<view class="content-section">
						<text class="section-title">评价内容</text>
						<textarea v-model="newReview.content" placeholder="分享你的游玩体验..." maxlength="500" class="review-textarea"></textarea>
					</view>
					<view class="images-section">
						<text class="section-title">上传图片</text>
						<view class="image-upload">
							<view class="upload-item" v-for="(img, index) in newReview.images" :key="index">
								<image :src="img" mode="aspectFill"></image>
								<view class="delete-btn" @click="removeImage(index)">
									<uni-icons type="close" size="12" color="#fff"></uni-icons>
								</view>
							</view>
							<view class="upload-btn" @click="chooseImage" v-if="newReview.images.length < 9">
								<uni-icons type="camera" size="24" color="#999"></uni-icons>
							</view>
						</view>
					</view>
					<view class="submit-section">
						<button class="submit-btn" @click="submitReview">发布评价</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scenicId: '',
			overallRating: 4.8,
			totalReviews: 1234,
			imageReviewCount: 856,
			currentFilter: 'all',
			ratingDistribution: [
				{ count: 980, percentage: 79.4 },
				{ count: 180, percentage: 14.6 },
				{ count: 50, percentage: 4.1 },
				{ count: 20, percentage: 1.6 },
				{ count: 4, percentage: 0.3 }
			],
			reviewsList: [
				{
					id: 1,
					username: '旅行达人',
					avatar: '/static/images/tourism/avatar1.jpg',
					rating: 5,
					date: '2023-12-20',
					content: '景色非常美，瀑布很壮观，值得一去！空气清新，环境优美，是个放松心情的好地方。',
					images: ['/static/images/tourism/review1.jpg', '/static/images/tourism/review2.jpg'],
					likeCount: 15,
					isLiked: false,
					replies: [
						{ author: '景区官方', content: '感谢您的好评，欢迎再次光临！' }
					]
				},
				{
					id: 2,
					username: '自然爱好者',
					avatar: '/static/images/tourism/avatar2.jpg',
					rating: 4,
					date: '2023-12-18',
					content: '空气清新，环境优美，适合全家出游。就是人有点多，建议错峰出行。',
					images: [],
					likeCount: 8,
					isLiked: false,
					replies: []
				},
				{
					id: 3,
					username: '摄影师小王',
					avatar: '/static/images/tourism/avatar3.jpg',
					rating: 5,
					date: '2023-12-15',
					content: '摄影爱好者的天堂！瀑布、山景、古建筑都很有特色，拍出来的照片很美。',
					images: ['/static/images/tourism/review3.jpg', '/static/images/tourism/review4.jpg', '/static/images/tourism/review5.jpg'],
					likeCount: 23,
					isLiked: true,
					replies: []
				}
			],
			newReview: {
				rating: 5,
				content: '',
				images: []
			}
		}
	},
	computed: {
		filteredReviews() {
			if (this.currentFilter === 'all') {
				return this.reviewsList;
			} else if (this.currentFilter === 'image') {
				return this.reviewsList.filter(item => item.images && item.images.length > 0);
			} else {
				return this.reviewsList.filter(item => item.rating == this.currentFilter);
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.scenicId = options.id;
		}
		this.loadReviews();
	},
	onPullDownRefresh() {
		this.loadReviews();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		loadReviews() {
			// 加载评价数据
			console.log('加载评价数据');
		},
		selectFilter(filter) {
			this.currentFilter = filter;
		},
		previewImage(images, index) {
			uni.previewImage({
				urls: images,
				current: index
			});
		},
		likeReview(item, index) {
			item.isLiked = !item.isLiked;
			if (item.isLiked) {
				item.likeCount = (item.likeCount || 0) + 1;
			} else {
				item.likeCount = Math.max(0, (item.likeCount || 0) - 1);
			}
		},
		replyReview(item) {
			uni.showToast({
				title: '回复功能开发中',
				icon: 'none'
			});
		},
		writeReview() {
			this.$refs.reviewPopup.open();
		},
		closeReviewPopup() {
			this.$refs.reviewPopup.close();
		},
		setRating(rating) {
			this.newReview.rating = rating;
		},
		chooseImage() {
			uni.chooseImage({
				count: 9 - this.newReview.images.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.newReview.images = this.newReview.images.concat(res.tempFilePaths);
				}
			});
		},
		removeImage(index) {
			this.newReview.images.splice(index, 1);
		},
		submitReview() {
			if (!this.newReview.content.trim()) {
				uni.showToast({
					title: '请输入评价内容',
					icon: 'none'
				});
				return;
			}
			
			// 提交评价
			uni.showLoading({
				title: '发布中...'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '评价发布成功',
					icon: 'success'
				});
				
				// 重置表单
				this.newReview = {
					rating: 5,
					content: '',
					images: []
				};
				
				this.closeReviewPopup();
				this.loadReviews();
			}, 1500);
		}
	}
}
</script>

<style lang="scss" scoped>
.reviews-page {
	background: #f8f9fa;
	min-height: 100vh;
	padding-bottom: 80px;
}

.rating-summary {
	background: #fff;
	padding: 20px 15px;
	display: flex;
	
	.overall-rating {
		width: 120px;
		text-align: center;
		
		.rating-score {
			font-size: 36px;
			font-weight: 600;
			color: #333;
			display: block;
		}
		
		.rating-stars {
			display: flex;
			justify-content: center;
			margin: 5px 0;
		}
		
		.total-reviews {
			font-size: 12px;
			color: #999;
		}
	}
	
	.rating-distribution {
		flex: 1;
		margin-left: 20px;
		
		.rating-bar {
			display: flex;
			align-items: center;
			margin-bottom: 8px;
			
			.star-label {
				width: 30px;
				font-size: 12px;
				color: #666;
			}
			
			.progress-bar {
				flex: 1;
				height: 6px;
				background: #f0f0f0;
				border-radius: 3px;
				margin: 0 10px;
				overflow: hidden;
				
				.progress-fill {
					height: 100%;
					background: #FFD700;
					border-radius: 3px;
				}
			}
			
			.count {
				width: 30px;
				font-size: 12px;
				color: #666;
				text-align: right;
			}
		}
	}
}

.filter-section {
	background: #fff;
	padding: 10px 0;
	margin-top: 10px;
	
	.filter-tags {
		white-space: nowrap;
		
		.filter-tag {
			display: inline-block;
			padding: 8px 16px;
			margin: 0 5px;
			background: #f5f5f5;
			border-radius: 20px;
			font-size: 14px;
			color: #666;
			
			&.active {
				background: #00A3FF;
				color: #fff;
			}
			
			&:first-child {
				margin-left: 15px;
			}
		}
	}
}

.reviews-list {
	margin-top: 10px;
	
	.review-item {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
		
		.review-header {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			
			.user-avatar {
				width: 40px;
				height: 40px;
				border-radius: 20px;
				margin-right: 10px;
			}
			
			.user-info {
				flex: 1;
				
				.username {
					font-size: 16px;
					color: #333;
					font-weight: 500;
					display: block;
					margin-bottom: 5px;
				}
				
				.review-meta {
					display: flex;
					align-items: center;
					
					.review-rating {
						display: flex;
						margin-right: 10px;
					}
					
					.review-date {
						font-size: 12px;
						color: #999;
					}
				}
			}
		}
		
		.review-content {
			font-size: 14px;
			color: #666;
			line-height: 1.6;
			margin-bottom: 10px;
		}
		
		.review-images {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 10px;
			
			image {
				width: 80px;
				height: 80px;
				border-radius: 6px;
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}
		
		.review-actions {
			display: flex;
			align-items: center;
			
			.action-btn {
				display: flex;
				align-items: center;
				margin-right: 20px;
				
				text {
					font-size: 12px;
					color: #999;
					margin-left: 5px;
				}
			}
		}
		
		.replies {
			background: #f8f9fa;
			border-radius: 8px;
			padding: 10px;
			margin-top: 10px;
			
			.reply-item {
				margin-bottom: 5px;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.reply-author {
					font-size: 12px;
					color: #00A3FF;
				}
				
				.reply-content {
					font-size: 12px;
					color: #666;
				}
			}
		}
	}
}

.write-review-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #00A3FF;
	color: #fff;
	padding: 12px 20px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	box-shadow: 0 4px 12px rgba(0, 163, 255, 0.3);
	
	text {
		margin-left: 5px;
		font-size: 14px;
	}
}

.review-popup {
	background: #fff;
	border-radius: 20px 20px 0 0;
	max-height: 80vh;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #f0f0f0;
		
		text {
			font-size: 16px;
			font-weight: 600;
		}
		
		.close-btn {
			color: #00A3FF;
			font-weight: normal;
		}
	}
	
	.popup-content {
		padding: 20px;
		
		.section-title {
			font-size: 14px;
			color: #333;
			margin-bottom: 10px;
			display: block;
		}
		
		.rating-section {
			margin-bottom: 20px;
			
			.rating-input {
				display: flex;
				align-items: center;
			}
		}
		
		.content-section {
			margin-bottom: 20px;
			
			.review-textarea {
				width: 100%;
				min-height: 100px;
				background: #f8f9fa;
				border-radius: 8px;
				padding: 10px;
				font-size: 14px;
				border: none;
				resize: none;
			}
		}
		
		.images-section {
			margin-bottom: 20px;
			
			.image-upload {
				display: flex;
				flex-wrap: wrap;
				
				.upload-item {
					width: 80px;
					height: 80px;
					position: relative;
					margin-right: 10px;
					margin-bottom: 10px;
					
					image {
						width: 100%;
						height: 100%;
						border-radius: 6px;
					}
					
					.delete-btn {
						position: absolute;
						top: -5px;
						right: -5px;
						width: 20px;
						height: 20px;
						background: #ff4757;
						border-radius: 10px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
				.upload-btn {
					width: 80px;
					height: 80px;
					background: #f8f9fa;
					border: 1px dashed #ddd;
					border-radius: 6px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		
		.submit-section {
			.submit-btn {
				width: 100%;
				background: #00A3FF;
				color: #fff;
				border: none;
				border-radius: 25px;
				padding: 12px 0;
				font-size: 16px;
			}
		}
	}
}
</style>